<template>
  <div class="details">
    <Editor
      class="editos"
      placeholder="请输入内容..."
      :value="editorContent"
      :plugins="plugins"
      :locale="zhHans"
      @change="handleChange"
      :uploadImages="uploadImage"
    />
  </div>
</template>

<script>
// 这里就是引入所有的扩展的插件

import { Editor } from '@bytemd/vue'
import gfm from '@bytemd/plugin-gfm'
import zhHans from 'bytemd/lib/locales/zh_Hans.json'
import 'highlight.js/styles/vs.css'
import 'bytemd/dist/index.css' // 导入编辑器样式
import 'juejin-markdown-themes/dist/juejin.min.css' // 其实就是需要这个css文件
// import { uploadArticleImage } from '@/api/article'
const plugins = [
  // 将所有的扩展功能放入插件数组中，然后就可以生效了
  gfm()
]

export default {
  components: { Editor }, // 组件注册
  name: 'MyMarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 双向绑定 content
    editorContent: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  data() {
    return {
      plugins, // 插件
      zhHans // 简体中文
    }
  },
  methods: {
    // 获取书写文档内容
    handleChange(v) {
      this.$emit('input', v)
    },
    // 上传图片 点击触发上传图片事件，大家获取文件把图片上传服务器然后返回url既可https://juejin.cn/post/7049657775193849887?searchId=20240906165806BAC68E2738EB89B4CB60
    async uploadImage(files) {
      console.log('files', files)
      const formData = new FormData()
      formData.append('files', files[0])
      try {
        // var result = await uploadArticleImage(formData)
        // this.$message({
        //   type: 'success',
        //   message: '图片添加成功'
        // })
        // return [
        //   {
        //     title: files.map(i => i.name),
        //     url: result.imgUrl
        //   }
        // ]
      } catch (error) {
        console.log('error: ', error)
      }
    }
  }
}
</script>
<style lang="scss">
.details {
  .editos {
    width: 1000px;
    .bytemd {
      height: calc(100vh - 150px) !important; // 改变编辑器默认高度，不需要的可以不配置
    }
    .bytemd-status {
      margin-top: 9px;
    }
  }
}
</style>
